<template>

    <div class="container">
        <div class="header">
            <div>
                <img class="logo" src="@/assets/images/logo.png" alt="">
                <span class="h1">三水国鸿校车</span>
            </div>
            <div class="h2">欢迎乘坐校车，购买校车服务</div>
        </div>
        <div class="main">
            <div class="title">用户注册</div>
            <div class="ipt-wrap">
                <div class="ipt">
                    <input type="text" placeholder="请输入监护人姓名" v-model="name">
                </div>
                <div class="ipt">
                    <input type="number" placeholder="请输入监护人手机号" v-model="phone">
                </div>
                <div class="ipt">
                    <input type="number" placeholder="请输入验证码" v-model="yzm">
                    <van-button class="btn" plain hairline color="#24C373" size="small" round :disabled="yzmDisabled" @click="getVerificationCode">{{yzmText}}</van-button>
                </div>
            </div>
            <div class="btn-wrap">
                <van-button class="btn" color="#24C373" :disabled="zcDisabled">注册</van-button>
            </div>

        </div>
    </div>
</template>

<script>
  export default {
    name: "m-register",
    computed:{
      yzmDisabled: {
        get(){return !this.name || !this.phone || this.yzmbtn},
        set(val){
          this.yzmbtn = val
        }
      },
      zcDisabled(){
        return !this.name || !this.phone || !this.yzm
      }
    },
    data(){
      return {
        name: '',
        phone: '',
        yzm: '',
        yzmbtn: false,

        yzmText: '获取验证码'
      }
    },
    methods: {
      getVerificationCode(){
        let num = 10;
        this.yzmDisabled = true;
        this.yzmText = num +'秒后重新获取';
        let timer = setInterval(() => {
          num--;
          if (!num) {
            clearInterval(timer);
            this.yzmDisabled = false;
            this.yzmText = '获取验证码'
            return
          }
          this.yzmText = num +'秒后重新获取';
        },1000)
      }
    }
  }
</script>

<style scoped lang="less">
    .container{
        background: #fff;
    }
    .header{
        background: url("@/assets/images/bg_arc.svg") no-repeat;
        background-size: 100%;
        height: 191px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .logo{
            height: 30px;
            width: 86px;
            vertical-align: middle;
            margin-right: 10px;
        }
        .h1{
            font-size: 30px;
            vertical-align: middle;
        }
        .h2{
            font-size: 17px;
            line-height: 30px;
        }
    }
    .main {
        padding: 15px;
        .title{
            color: #393939;
            font-size: 27px;
            font-weight: bold;
            padding-top: 20px;
        }
        .ipt-wrap{
            padding-top: 10px;
            .ipt{
                height: 50px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #dedede;
                & > input{
                    padding: 0 15px;
                    height: 100%;
                    flex: 1;
                    font-size: 14px;
                }
                & > .btn{
                    /*width: 90px;*/
                    height: 27px;
                    font-size: 14px;
                }
            }
        }
        .btn-wrap{
            padding-top: 20px;
            & > .btn{
                width: 100%;
            }
        }
    }
</style>
